<template>
	<view class="container" :style="[containHeight]">
		<view class="content">
			<view class="delItem layout-start">
				<u-button text="创建" color="linear-gradient(to right, #7774ff, #017ffd,#01b1fd)"
					@click="newcrowd()"></u-button>
			</view>
			<view v-if="challengeList.length==0">
				<u-empty mode="list" icon="../../static/listEmpty.png"></u-empty>
			</view>
			<u-swipe-action v-for="(item,index) in challengeList" :key="index" autoClose v-else>
				<u-swipe-action-item :options="optionscrowd" @click="swipeItem(item,$event)">
					<view class="historicalAchievements_item u-border-bottom">
						<text class="bold greyTxt">考试名称：</text>
						<text class="bold">{{item.name}}</text>
						<view class="layout-between">
							<view class="includePeopleTxt">
								<text class="bold greyTxt">挑战时长:</text>
								<text>{{item.duration}}分钟 </text>
							</view>
							<view class="includePeopleTxt">
								<text class="bold greyTxt">及格线:</text>
								<text class="bule">{{item.passScore}}分 </text>
							</view>
						</view>						
						<view class="includePeopleTxt layout-start">
							<text class="bold greyTxt">状态:</text>
							<u-tag plain :text="item.status == 0 ? '正常' : '禁用'" size="mini"></u-tag>
						</view>						
						<view class="includePeopleTxt">
							<text class="bold greyTxt">开始时间:</text>
							<text>{{item.startTime}} </text>
						</view>
						<view class="includePeopleTxt">
							<text class="bold greyTxt">结束时间:</text>
							<text>{{item.endTime}} </text>
						</view>
						<view class="includePeopleTxt layout-start" @click="moreIntro(item.examIntroduce)">
							<text class="bold greyTxt">考试介绍：</text>
							<text>{{item.examIntroduce}} </text>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<u-popup :show="isNewEdit" mode="center" @close="closeNewEdit" @open="getHistoryData">
			<view class="popupContent">
				<view class="popupTitle">{{formTitle == 0 ? '创建' : '编辑'}}</view>
				<u--form labelPosition="left" labelWidth="95" :model="formPopup" ref="uForm">
					<u-form-item label="考试名称" prop="name" required>
						<u--input placeholder="请输入考试名称" border="surround" v-model="formPopup.name"></u--input>
					</u-form-item>
					<u-form-item label="题库" prop="questionBankId">
						<zxz-uni-data-select :localdata="options.bankName" placeholder="请选择题库"
							v-model="formPopup.questionBankId" dataKey="key" dataValue="value"
							@change="isResultsConfirm">
						</zxz-uni-data-select>
					</u-form-item>
					<u-form-item label="单选题个数" prop="singleChoiceNum">
						<u-number-box v-model="formPopup.singleChoiceNum"></u-number-box>
					</u-form-item>
					<u-form-item label="单选题得分" prop="singleChoiceScore">
						<u-number-box v-model="formPopup.singleChoiceScore"></u-number-box>
					</u-form-item>
					<u-form-item label="多选题个数" prop="multiChoiceNum">
						<u-number-box v-model="formPopup.multiChoiceNum"></u-number-box>
					</u-form-item>
					<u-form-item label="多选题得分" prop="multiChoiceScore">
						<u-number-box v-model="formPopup.multiChoiceScore"></u-number-box>
					</u-form-item>
					<u-form-item label="判断题个数" prop="judgeChoiceNum">
						<u-number-box v-model="formPopup.judgeChoiceNum"></u-number-box>
					</u-form-item>
					<u-form-item label="判断题得分" prop="judgeChoiceScore">
						<u-number-box v-model="formPopup.judgeChoiceScore"></u-number-box>
					</u-form-item>
					<u-form-item label="挑战时长(分钟)" prop="duration">
						<u-number-box v-model="formPopup.duration"></u-number-box>
					</u-form-item>
					<u-form-item label="及格线" prop="passScore">
						<u-number-box v-model="formPopup.passScore"></u-number-box>
					</u-form-item>					
					<u-form-item label="考试人员" prop="examCrowdIds">
						<zxz-uni-data-select :multiple="true" :localdata="options.examCrowd.list" placeholder="请选择考试人员"
							v-model="formPopup.examCrowdIds" dataKey="key" dataValue="value" collapseTags>
						</zxz-uni-data-select>
					</u-form-item>
					<u-form-item label="时间">					
						<view class="dateBorder">
							<uni-datetime-picker :value="rangeDate" v-model="rangeDate" type="datetimerange" :border="false" />
						</view>
					</u-form-item>					
					<u-form-item label="状态" prop="status">
						<u-switch v-model="formPopup.status" :activeValue="1" :inactiveValue="0" activeColor="#ff4949"
							activeText="禁用" inactiveText="正常"></u-switch>
					</u-form-item>				
					<u-form-item label="考试介绍" prop="examIntroduce" class="mB80">
						<u--textarea v-model="formPopup.examIntroduce" placeholder="请输入考试介绍"></u--textarea>
					</u-form-item>
				</u--form>
				<view class="btn-group absolutePosition">
					<u-button text="取消" class="reset-btn" @click="cancelCrowd('uForm')"></u-button>
					<u-button text="确认" type="primary" class="search-btn" @click="confirmcrowd('uForm')"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isIntro" mode="center" closeable @close="isIntro=false">
			<view class="popupPeople">
				<view class="popupTitle">考试介绍</view>
				<view>{{introDetail}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		examMain,

		selectExamCrowd,
		examSelect,
		examAdd,
		examUpdate,
		viewExam,
		challengeExamMain,
		selectBankName,
		viewUsername,
		challengeExamAdd,
		challengeExamUpdate,
		challengeExamDelete,
		challengeExamView
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				fullHeight: true,
				challengeList: [],
				optionscrowd: [{
					text: '编辑',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				isNewEdit: false,
				formTitle: 0, // 0-创建/1-编辑				
				formPopup: {
					name: "", //试卷名称
					questionBankId: null, //题库id
					singleChoiceNum: 0, //单选题个数
					singleChoiceScore: 0, //每个单选题得分
					multiChoiceNum: 0, //多选题个数
					multiChoiceScore: 0, //每个多选题得分
					judgeChoiceNum: 0, //判断选择题个数
					judgeChoiceScore: 0, //每个判断选择题得分
					duration: 0, //考试时长（分钟）
					passScore: 0, //及格线
					examCrowdIds: "", //参加考试的人员列表
					startTime: "", //考试开始时间
					endTime: "", //考试结束时间					
					status: 0, // 状态 0-正常 1-禁用
					examIntroduce: "", //考试介绍
				},
				rangeDate: [],
				options: {
					examCrowd: {
						list: [],
						checked: false,
					},					
					bankName: [],
				},
				isIntro:false,
				introDetail:'',
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userinfo').id
			this.getchallengeList()
			this.getOptions()
		},
		computed: {
			containHeight() {
				return this.fullHeight ? {
					/*#ifdef MP-WEIXIN*/
					// 微信小程序特有代码
					height: '100vh',
					/*#endif*/
					/*#ifndef MP-WEIXIN*/
					height: 'calc(100vh - 44px)'
					/*#endif*/
				} : {
					height: '100%'
				}
			},
		},
		onReachBottom() {
			if (this.fullHeight) {
				this.fullHeight = false
			}
		},
		methods: {
			getchallengeList(isdel) {
				challengeExamMain().then(s => {
					if (s.code === 20000) {
						this.challengeList = s.data
						if (isdel == 'ture') {
							//删除操作
							this.challengeList = s.data
						} else {
							this.challengeList = this.challengeList.concat(s.data)
						}						
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
			},
			swipeItem(item, e) {
				// console.log("swipeItem e", e);
				// console.log("item", item);				
				if (e.index == 0) {
					//编辑
					this.isNewEdit = true
					this.formTitle = 1
					challengeExamView({
						id: item.id,
					}).then(s => {
						if (s.code === 20000) {
							this.formPopup = s.data				
							this.formPopup.examCrowdIds=this.formPopup.examCrowdIds.split(',')
							this.rangeDate=[]
							this.rangeDate[0] = this.formPopup.startTime
							this.rangeDate[1] = this.formPopup.endTime
							// console.log("this.formPopup",this.formPopup);
							console.log("this.rangeDate",this.rangeDate);
						} else {
							uni.showToast({
								title: s.message,
								icon: "none"
							})
						}
					})
					console.log("this.rangeDate 2",this.rangeDate);
				} else if (e.index == 1) {
					//删除
					let that = this
					uni.showModal({
						title: '提示',
						content: '此操作将永久删除该试卷, 是否继续?',
						success: function(res) {
							if (res.confirm) {
								challengeExamDelete({
									id: item.id
								}).then(s => {
									if (s.code === 20000) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										})
										that.getchallengeList('ture')
									} else {
										uni.showToast({
											title: s.message,
											icon: 'none'
										})
									}
								})
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				} else {

				}
			},
			newcrowd() {
				this.isNewEdit = true
				this.formTitle = 0;
			},
			confirmcrowd() {
				this.isNewEdit = false
				this.formPopup.startTime = this.rangeDate[0]
				this.formPopup.endTime = this.rangeDate[1]
				let data = JSON.parse(JSON.stringify(this.formPopup));
				this.setHistoryData(data);
				const str = data.examCrowdIds.toString();
				data.examCrowdIds = str;
				if (this.formTitle == 0) {
					//创建
					challengeExamAdd(data).then(s => {
						if (s.code === 20000) {
							uni.showToast({
								title: '创建成功',
								icon: 'success'
							})
							this.getchallengeList()
						} else {
							uni.showToast({
								title: s.message,
								icon: 'error'
							})
						}
					})
				} else if (this.formTitle == 1) {
					//编辑
					challengeExamUpdate(data).then(s => {
						if (s.code === 20000) {
							uni.showToast({
								title: '更新成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: s.message,
								icon: 'none'
							})
						}
					})
				}
			},
			cancelCrowd(formName) {
				this.isNewEdit = false
				this.$refs[formName].resetFields()
				this.rangeDate = []
			},
			// 获取下拉列表
			getOptions() {
				selectBankName().then(s => {
					if (s.code === 20000) {
						this.options.bankName = s.data.map(item => ({
							key: item.bank_name,
							value: item.id,
						}));
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
				viewUsername().then(s => {
					if (s.code === 20000) {
						this.options.examCrowd.list = s.data.map(item => ({
							key: item,
							value: item,
						}));
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
				// selectExamCrowd().then(s => {
				// 	if (s.code === 20000) {
				// 		this.options.examCrowd.list = s.data.map(item => ({
				// 			key: item.crowd_name,
				// 			value: item.id,
				// 			includePeoples: item.include_peoples
				// 		}));
				// 	} else {
				// 		uni.showToast({
				// 			title: s.message,
				// 			icon: "none"
				// 		})
				// 	}
				// })
			},
			changeDept() {
				// let arr1 = this.formPopup.examCrowdId;
				// let arr2 = this.options.examCrowd.list;
				// // console.log(arr1, arr2);
				// if (arr1) {
				// 	let equ = arr2.filter((item) => arr1.some((ele) => ele === item.value));
				// 	// console.log("equ", equ);
				// 	let str = "";
				// 	equ.forEach((e) => {
				// 		if (!str) str = str.concat(e.includePeoples);
				// 		else str = str.concat(",", e.includePeoples);
				// 	});
				// 	this.formPopup.examCrowdIds = str;
				// }

			},
			isResultsConfirm(val) {
				// console.log("val",val);
			},
			closeNewEdit() {
				this.formPopup = {}
				this.isNewEdit = false
			},
			
			// 存入提交的题目数量、分值
			setHistoryData(data) {
				let history = {
					singleChoiceNum: 0, //单选题个数
					singleChoiceScore: 0, //每个单选题得分
					multiChoiceNum: 0, //多选题个数
					multiChoiceScore: 0, //每个多选题得分
					judgeChoiceNum: 0, //判断选择题个数
					judgeChoiceScore: 0, //每个判断选择题得分
					duration: 0, //考试时长（分钟）
					passScore: 0, //及格线
				};
				for (let k in history) {
					history[k] = data[k];
				}
				uni.setStorageSync('jqCommonExamHistory', JSON.stringify(history))
			},
			// 获取上次提交的题目数量、分值
			getHistoryData() {
				let history = JSON.parse(uni.getStorageSync('jqCommonExamHistory'));
				// console.log(history);
				for (let k in history) {
					this.formPopup[k] = history[k];
				}
			},
			moreIntro(intro){
				this.isIntro = true
				this.introDetail =intro
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(#5191FF 5%, #6AA2FF 8%, #BDD7FE 15%, #F6FAFF 100%);
		padding: 30rpx 30rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;

		.content {
			background: #ffffff;
			margin-top: 30rpx;
			padding: 30rpx 32rpx;
			box-sizing: border-box;
			border-radius: 15rpx;
			opacity: 0.9;
			width: 100%;
			position: relative;
		}
	}


	.historicalAchievements_item {
		background: #ffffff;
		box-sizing: border-box;
		padding: 30rpx;

		// border-radius: 20rpx;
		// box-shadow: 4px 4px 10px #888888;
		.line {
			height: 1rpx;
			background: #737375;
			width: 100%;
			margin: 30rpx 0rpx;
		}

	}

	.btn-group {
		display: flex;
		margin-top: 60rpx;
		width: 100%;
		position: relative;
		justify-content: space-between;

		.search-btn {
			width: 40%;
			border-radius: 100rpx;
			background: linear-gradient(to right, #7774ff, #017ffd, #01b1fd);
			color: #fff;
		}

		.reset-btn {
			width: 40%;
			border-radius: 100rpx;
		}

	}

	.bold {
		font-weight: 700;
		white-space: nowrap;
	}

	.delItem {
		width: 30%;
		padding-top: 20rpx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 20rpx;
	}

	.popupContent {
		margin-top: 20rpx;
		height: 1200rpx; // 固定高度
		overflow-y: scroll; // 超出滚动
		overscroll-behavior: none; // 禁止滚动溢出
	}

	/deep/.u-swipe-action-item__right {
		position: absolute;
		top: 1px;
		bottom: 1px;
		right: 1px;
	}

	/deep/.u-popup__content {
		width: 90%;
		position: relative;
		padding: 40rpx;
		box-sizing: border-box;
		overflow: auto;
	}

	.popupTitle {
		font-weight: 900;
		white-space: nowrap;
		line-height: 1.6;
		text-align: center;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 2;
		background: #ffffff;

	}

	.absolutePosition {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		margin: 0rpx 0rpx 20rpx 0rpx;
		box-sizing: border-box;
		padding-top: 20rpx;
	}

	.mB80 {
		margin-bottom: 80rpx;
	}

	.includePeopleTxt {
		// width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 1.8;
	}

	.selectedTxt {
		color: rgb(48, 49, 51);
	}

	.dateBorder {
		width: 100%;
		height: 38px;
		border: 1px solid #dadbde;
		// border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0rpx 25rpx;
		font-size: 16px;
		// z-index: 1;
	}
	.bule {
		color: #3888FF;
		font-size: 32rpx;
	}
	.greyTxt{
		color: #9A9EA1;
	}
	.popupPeople {
		margin-top: 20rpx;		
		// height: 300rpx; // 固定高度
		// overflow-y: scroll; // 超出滚动
		// overscroll-behavior: none; // 禁止滚动溢出
	}
</style>